<template>
    <div class="main-content-center">
        <!-- <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a style="font-weight: 500;">智提升</a></el-breadcrumb-item
                >
                <el-breadcrumb-item><span>同步</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="big-title">
            同步
        </div>
        <!-- <div class="title">
            <el-tabs v-model="type">
                <el-tab-pane label="练习" name="练习"></el-tab-pane>
                <el-tab-pane label="优课" name="优课"></el-tab-pane>
                <el-tab-pane label="听教材" name="听教材"></el-tab-pane>
                <el-tab-pane label="电子书" name="电子书"></el-tab-pane>
            </el-tabs>
        </div> -->

        <nav-select
            :navData="nav_Select"
            @getSectionList="getSectionList"
        ></nav-select>

        <div class="content-flex">
            <fold
                :showSectionList="showSectionList"
                :showIndex="isShowSecondSectionIndex"
                :secondSectionList="secondSectionList"
                @getSectionList="getSectionList"
                :sNoData="sNoData"
                :ssNoData="ssNoData"
                :ssLastPage="ssLastPage"
                :sTotal="sTotal"
                :ssTotal="ssTotal"
                :sid="sid"
            ></fold>
            <learning-situation
                :learningSituation="learningSituation"
            ></learning-situation>
        </div>
    </div>
</template>

<script>
import navSelect from "@/components/navSelect/index";
import fold from "./components/fold";
import learningSituation from "@/components/learningSituation/index";
import { getSubject } from "@/api/testQuestions/subject";
import { getSectionLists } from "@/api/testQuestions/section";
import { getRate } from "@/api/testQuestions/learningRate";
export default {
    components: {
        navSelect,
        fold,
        learningSituation
    },
    props: {},
    data() {
        return {
            type: "练习",
            sTotal: 0,
            ssTotal: 0,
            sLastPage: 1,
            ssLastPage: 1,
            sNoData: false,
            ssNoData: false,
            isNoSection: false, // 是否没有章节
            showMore: false, //是否出现加载更多
            nav_Select: [], //科目列表1
            subjectList: [], //科目列表2
            showSectionList: [], //试题
            isShowSecondSectionIndex: -1,
            isShowCollaspe: true, //是否显示折叠栏
            secondSectionList: [], // 子章节
            secondSectionList2: [], //子章节2
            sid: null, //sid
            loading: null, //加载
            learningSituation: {
                today: {
                    questionSize: 10,
                    accuracy: 56,
                    duration: 2.5
                },
                yesterday: {
                    questionSize: 10,
                    accuracy: 56,
                    duration: 2.5
                },
                integral: 10
            }
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.getSubjectList();
    },
    methods: {
        //获取科目列表
        getSubjectList() {
            var obj = {
                pagesize: 20,
                textbook: this.$store.getters.userInfo.textbook
            };
            getSubject(obj).then(res => {
                if (res.code === 200) {
                    this.subjectList = res.data;
                    this.sid = res.data[0].sid;
                    var subjectObj = {};
                    var max = 10;
                    if (res.data.length > max) {
                        subjectObj = {
                            fold: true,
                            index1: 0,
                            showTypeLength: max,
                            max: max,
                            checkName: res.data[0].subject_name,
                            name: "科目",
                            list: res.data
                        };
                    } else {
                        subjectObj = {
                            max: max,
                            checkName: res.data[0].subject_name,
                            name: "科目",
                            list: res.data
                        };
                    }
                    this.nav_Select.push(subjectObj);
                    this.getSectionList(1, "", "", "", this.sLastPage);
                }
            });
        },
        // 获取试题列表
        getSectionList(type, zid, index, sid, sPage, ssPage) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            if (index == this.isShowSecondSectionIndex) {
                this.isShowSecondSectionIndex = -1;
            }
            var reqObj = {
                textbook: this.$store.getters.userInfo.textbook,
                education: this.$store.getters.userInfo.education,
                sid: this.sid,
                type: type,
                grade: this.$store.getters.userInfo.grade,
                pagesize: 8
            };
            if (zid) {
                reqObj.fid = zid;
            }
            if (index) {
                this.isShowSecondSectionIndex = index;
            }
            if (sid) {
                reqObj.sid = sid;
                this.sid = sid;
                this.isShowSecondSectionIndex = -1;
            }
            if (type == 1) {
                reqObj.page = sPage;
            } else if (type == 2) {
                reqObj.page = ssPage;
            }
            this.sNoData = false;
            this.ssNoData = false;
            var secondSectionList2 = [];
            getSectionLists(reqObj).then(res => {
                if (res.code === 200) {
                    if (res.data.data.length > 0) {
                        if (type == 1) {
                            this.showSectionList = res.data.data;
                            this.sLastPage = res.data.last_page;
                            this.sTotal = res.data.total;
                            this.getSectionList(
                                2,
                                this.showSectionList[0].zid,
                                1
                            );
                        } else {
                            this.ssLastPage = res.data.last_page;
                            this.ssTotal = res.data.total;
                            secondSectionList2 = res.data.data;
                            if (this.ssLastPage >= ssPage) {
                                this.secondSectionList2 = this.secondSectionList2.concat(
                                    secondSectionList2
                                );
                            } else {
                                this.secondSectionList2 = secondSectionList2;
                            }
                            this.getPractice(
                                reqObj.sid,
                                reqObj.fid,
                                "",
                                this.secondSectionList2
                            );
                        }
                    } else {
                        if (type == 1) {
                            this.sNoData = true;
                        } else {
                            this.ssNoData = true;
                            this.$message.error("暂无数据");
                        }
                        this.loading.close();
                        // this.$message.error("该书本暂无优课");
                    }
                } else {
                    this.showMore = false;
                    this.isNoSection = true;
                    this.lastPage = 0;
                    this.sectionList = [];
                }
                this.$forceUpdate();
            });
        },

        // 获取学习记录
        getPractice(sid, fid, zid, data1) {
            var reqObj = {
                subjectid: sid, // 科目id
                fid: fid // 1级章节id
            };
            if (zid) {
                reqObj.chapterid = zid; // 章节id
            }
            getRate(reqObj).then(res => {
                var status = {};
                if (res.code == 200) {
                    res.data.forEach(function(practice) {
                        status[practice.chapterid] = practice;
                    });
                }
                this.secondSectionList = data1.map(function(section) {
                    section.practice_id =
                        status[section.zid] && status[section.zid].practice_id;
                    section.fid = fid;
                    if (section.practice_id) {
                        (section.practice_lists_count =
                            status[section.zid].practice_lists_count),
                            (section.practice_page =
                                status[section.zid].practice_page);
                    }
                    return section;
                });
                console.log("this.secondSectionList", this.secondSectionList);
                this.loading.close();
                this.$forceUpdate();
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content {
    .main-content-center {
        padding: 16px 32px;
        box-sizing: border-box;
    }
}
.main-content-center {
    .breadcrumb {
        margin-bottom: 20px;
    }
    .big-title {
        font-size: 20px;
        color: #2d3440;
        margin-bottom: 20px;
    }
}
.content-flex {
    margin-top: 24px;
    display: flex;
}
</style>
